<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Widgets</title>
    <link rel="stylesheet" href="bootstrap-3/bootstrap-3.3.7-dist/css/bootstrap.min.css" type="text/css"/>
    <link rel="stylesheet" href="css/base.css" type="text/css"/>
    <link rel="stylesheet" href="css/Widgets.css" type="text/css"/>
    <link rel="stylesheet" href="Font-Awesome-3/Font-Awesome-3.2.1/css/font-awesome.min.css" type="text/css"/>
    <script src="jq/jquery.min.js"></script>
    <script src="bootstrap-3/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="jq/Widgets.js"></script>
</head>
<body>
<!--头部 start-->
<div class="container-fluid">
    <nav class="navbar navbar-default" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                <i class="glyphicon glyphicon-heart-empty"></i>
                <span>Flatty</span>
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 row">
            <ul class="nav navbar-nav">
                <li><a href="#" class="glyphicon glyphicon-align-justify"></a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <form class="navbar-form navbar-left " role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                            <i class="glyphicon glyphicon-search"></i>
                        </div>
                    </form>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle glyphicon glyphicon-adjust" data-toggle="dropdown"></a>
                    <ul class="dropdown-menu color">
                        <li>
                            <p>Body color</p>
                        </li>
                        <li>
                            <a href="#">
                                <span>Light (default)</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span>Dark</span>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <p>Contrast color</p>
                        </li>
                        <li>
                            <a href="#">
                                <i class="glyphicon glyphicon-user red"></i>
                                <span>Red (default)</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="glyphicon glyphicon-user blue"></i>
                                <span>Blue</span>
                            </a>
                        </li>
                        <li class="icon-change">
                            <a href="#">
                                <i class="glyphicon glyphicon-user orange"></i>
                                <span>Orange</span>
                            </a>
                        </li>
                        <li class="icon-change">
                            <a href="#">
                                <i class="glyphicon glyphicon-user purple"></i>
                                <span>Purple</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="glyphicon glyphicon-user green"></i>
                                <span>Green</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#">
                                <i class="glyphicon glyphicon-user"></i>
                                <span>John Doe signed up</span>
                                <span>just now</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="glyphicon glyphicon-user"></i>
                                <span>John Doe signed up</span>
                                <span>just now</span>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">ALL notifications</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <img src="img/avatar.jpg">
                        <span>Mila Kunis</span>
                        <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#"><i class="glyphicon glyphicon-user"></i><span>Profile</span></a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-cog"></i><span>Settings</span></a></li>
                        <li class="divider"></li>
                        <li><a href="#">Sign out</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </nav>
</div>
<!--头部 end-->
<main>
    <div class="content-left">
        <ul class="left-list">
            <li class="list-item">
                <a href="index.html">
                    <i class="icon-dashboard"></i>
                    <span class="list-item-font">Dashboard</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-edit"></i>
                    <span class="list-item-font">Forms</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Form styles and features</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Form components</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="Validations.html">
                            <i class="icon-caret-right"></i>
                            <span>Validations</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="Wizard.html">
                            <i class="icon-caret-right"></i>
                            <span>Wizard</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-tint"></i>
                    <span class="list-item-font">UI Elements & Widgets</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>UI Elements</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="Widgets.html">
                            <i class="icon-caret-right"></i>
                            <span>Widgets</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <a href="buttons-and-icon.html">
                    <i class="icon-star"></i>
                    <span class="list-item-font">Buttons & Icons</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-cogs"></i>
                    <span class="list-item-font">Components</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="chart.html">
                            <i class="icon-bar-chart"></i>
                            <span>Charts</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-envelope"></i>
                            <span>Address book</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-comments"></i>
                            <span>Chats</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-pencil"></i>
                            <span>In-place editing</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-list-ul"></i>
                            <span>File trees</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="Fileupload.html">
                            <i class="icon-file"></i>
                            <span>Fileupload</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="Todo-list.html">
                            <i class="icon-list-alt"></i>
                            <span>Todo list</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="WYSIWYG.html">
                            <i class="icon-paste"></i>
                            <span>WYSIWYG</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <a href="Tables.html">
                    <i class="icon-table"></i>
                    <span class="list-item-font">Tables</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-th"></i>
                    <span class="list-item-font">Grid</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-font"></i>
                    <span class="list-item-font">Typography</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-calendar"></i>
                    <span class="list-item-font">Calendar</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-book"></i>
                    <span class="list-item-font">Example pages</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-money"></i>
                            <span>Invoice</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-picture"></i>
                            <span>Gallery</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-time"></i>
                            <span>Timeline</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-table"></i>
                            <span>Pricing tables</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-user"></i>
                            <span>User profile</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-question-sign"></i>
                            <span>404 Error</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-cogs"></i>
                            <span>500 Error</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-signin"></i>
                            <span>Sign in</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-bullhorn"></i>
                            <span>FAQ</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-inbox"></i>
                            <span>Orders</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-search"></i>
                            <span>Search results</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-circle-blank"></i>
                            <span>Blank page</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-cog"></i>
                    <span class="list-item-font">Layouts</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Closed navigation</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Fixed header</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Fixed navigation</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Fixed navigation & header</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-mail-reply"></i>
                    <span class="list-item-font">Email templates</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-folder-open-alt"></i>
                    <span class="list-item-font">Four level dropdown</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span class="list-item-font">Second level</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item"></li>
        </ul>
    </div>
    <div class="content">
        <div class="content-title">
            <div class="subtitle col-sm-6">
                <span class="glyphicon glyphicon-tint"></span>
                <span>Wizard</span>
            </div>
            <div class="link col-sm-6">
                <a class="glyphicon glyphicon-stats"></a>
                <span>UI Elements & Widgets ></span>
                <span>Wizard</span>
            </div>
        </div>
        <div class="content-center">
            <div class="quick">
                <p>Quick navigation</p>
                <div class="container-icon">
                    <div class="row">
                        <div class="col-xs-12"><i class="icon-comments"></i></div>
                        <div class="col-xs-12"><i class="icon-star"></i></div>
                        <div class="col-xs-12"><i class="icon-magic"></i></div>
                        <div class="col-xs-12 "><i class="icon-eye-open"></i></div>
                        <div class="col-xs-12" ><i class="icon-inbox"></i></div>
                        <div class="col-xs-12 "><i class="icon-refresh"></i></div>
                    </div>
                </div>
                <p>or</p>
                <div class="container-explain ">
                    <div class="row">
                        <div><i class="icon-comments"></i><a href="">COMMENTS</a></div>
                        <div><i class="icon-star"></i><a href="">VEEEERY LOMG TITLE OF THIS QUICK LINK</a></div>
                        <div><i class="icon-magic"></i><a href="">MAGIC</a></div>
                        <div><i class="icon-eye-open"></i><a href="">SHOW</a></div>
                        <div><i class="icon-inbox"></i><a href="">ORDERS</a></div>
                        <div><i class="icon-refresh"></i><a href="">SPINNING</a></div>
                    </div>
                </div>
            </div>
            <div class="text"> <p>Statistics</p></div>
            <div class="statistics row">
                <div class="center-box order col-md-6">
                    <div class="title">
                        <div class="subtitle"><i class="icon-inbox"></i>Order</div>
                        <div class="icon">
                            <span class="glyphicon glyphicon-remove order-wrong"></span>
                            <span class="glyphicon glyphicon-chevron-up order-right"></span>
                        </div>
                    </div>
                    <div class="center-content  order-content public row">
                        <ul class="col-md-6">
                            <li>
                                <div><h3>191</h3><p>NEW</p></div>
                                <div><i class=" icon-inbox "></i></div>
                            </li>
                            <li>
                                <div><h3>311</h3><p>IN PROCESS</p></div>
                                <div><i class=" icon-check "></i></div>
                            </li>
                            <li>
                                <div><h3>3</h3><p>PENDING</p></div>
                                <div><i class=" icon-time"></i></div>
                            </li>
                        </ul>
                        <ul class="col-md-6">
                            <li>
                                <div><h3>3</h3><p>SHIPPED</p></div>
                                <div><i class=" icon-truck "></i></div>
                            </li>
                            <li>
                                <div><h3>1</h3><p>APPROVED</p></div>
                                <div><i class=" icon-flag "></i></div>
                            </li>
                            <li>
                                <div><h3>0</h3><p>CANCELED</p></div>
                                <div><i class=" icon-remove "></i></div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="center-box visitors col-md-3">
                    <div class="title">
                        <div class="subtitle"><i class="icon-inbox"></i>Visitors</div>
                        <div class="icon">
                            <span class="glyphicon glyphicon-remove visitors-wrong"></span>
                            <span class="glyphicon glyphicon-chevron-up visitors-right"></span>
                        </div>
                    </div>
                    <div class="center-content  visitors-content public">
                        <ul>
                            <li>
                                <div><i class=" icon-user"></i></div>
                                <div><h3>9100</h3><p>UNIQUE</p></div>
                            </li>
                            <li>
                                <div><i class=" icon-book"></i></div>
                                <div><h3>4100</h3><p>PAVGEVIEWS</p></div>
                            </li>
                            <li>
                                <div><i class=" icon-time"></i></div>
                                <div><h3>12:21</h3><p>AVERAGE TIME</p></div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="center-box comments col-md-3">
                    <div class="title">
                        <div class="subtitle"><i class="icon-comments"></i>Comments</div>
                        <div class="icon">
                            <span class="glyphicon glyphicon-remove comments-wrong"></span>
                            <span class="glyphicon glyphicon-chevron-up comments-right"></span>
                        </div>
                    </div>
                    <div class="center-content  comments-content public">
                        <ul>
                            <li>
                                <div><h3>91</h3><p>NEW</p></div>
                                <div><i class=" icon-plus"></i></div>
                            </li>
                            <li>
                                <div><h3>1</h3><p>APPROVED</p></div>
                                <div><i class=" icon-ok"></i></div>
                            </li>
                            <li>
                                <div><h3>123</h3><p>PENDING</p></div>
                                <div><i class=" icon-time"></i></div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="text"> <p>Boxes</p></div>
            <div class="boxes row">
                <div class="center-box classic-box col-md-4">
                    <div class="title">
                        <div class="subtitle">Classic box</div>
                        <div class="icon">
                            <span class="glyphicon glyphicon-remove classic-box-wrong"></span>
                            <span class="glyphicon glyphicon-chevron-up classic-box-right"></span>
                        </div>
                    </div>
                    <div class="center-content  classic-box-content">
                        Dicta ea nihil voluptas ab repellat debitis et aperiam ut explicabo qui alias velit accusantium omnis tempora maiores ratione unde accusamus.
                    </div>
                </div>
                <div class="center-box colored col-md-4">
                    <div class="title">
                        <div class="subtitle">Colored</div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                Dropdown <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="center-content  colored-content">
                        Dicta ea nihil voluptas ab repellat debitis et aperiam ut explicabo qui alias velit accusantium omnis tempora maiores ratione unde accusamus.
                    </div>
                </div>
                <div class="center-box bordered col-md-4">
                   <div class="case">
                       <div class="title">
                           <div class="subtitle">Bordered</div>
                           <div class="icon">
                               <span class="glyphicon glyphicon-remove bordered-wrong"></span>
                               <span class="glyphicon glyphicon-chevron-up bordered-right"></span>
                           </div>
                       </div>
                       <div class="center-content  bordered-content">
                           Dicta ea nihil voluptas ab repellat debitis et aperiam ut explicabo qui alias velit accusantium omnis tempora maiores ratione unde accusamus.
                       </div>
                   </div>
                </div>
            </div>
            <div class="boxes row">
                <div class="center-box collapsed col-md-4 col-sm-4 col-xs-4">
                   <div class="case">
                       <div class="title collapsed-title">
                           <div class="subtitle">Collapsed</div>
                           <div class="icon">
                               <span class="glyphicon glyphicon-remove collapsed-wrong"></span>
                               <span class="glyphicon glyphicon-chevron-up collapsed-right"></span>
                           </div>
                       </div>
                       <div class="center-content  collapsed-content" style="display: none">
                           Dicta ea nihil voluptas ab repellat debitis et aperiam ut explicabo qui alias velit accusantium omnis tempora maiores ratione unde accusamus.
                       </div>
                   </div>
                </div>
                <div class="center-box with-label col-md-4 col-sm-4 col-xs-4">
                    <div class="title label-title">
                        <div class="subtitle">With label</div>
                       <div class="icon icon-label">
                            <span>31%</span>
                           <i class="icon-arrow-up"></i>
                       </div>
                    </div>
                    <div class="center-content  label-content">
                        Dicta ea nihil voluptas ab repellat debitis et aperiam ut explicabo qui alias velit accusantium omnis tempora maiores ratione unde accusamus.
                    </div>
                </div>
                <div class="center-box scrollable col-md-4 col-sm-4 col-xs-4">
                   <div class="case">
                       <div class="title scrollable-tile">
                           <div class="subtitle">Scrollable</div>
                           <div class="icon">
                               <span class="glyphicon glyphicon-remove scrollable-wrong"></span>
                               <span class="glyphicon glyphicon-chevron-up scrollable-right"></span>
                           </div>
                       </div>
                       <div class="center-content  scrollable-content">
                           Rem est ipsa vel facilis non quam officiis aliquam possimus mollitia in corrupti autem ut sapiente minus maxime sit velit sed qui explicabo est inventore adipisci consequuntur voluptate debitis sed error et id et reiciendis recusandae cupiditate assumenda autem voluptatem aut enim tempore praesentium tempora alias itaque temporibus odit commodi est occaecati voluptatum aut optio nemo et repudiandae eveniet sunt repellat amet consectetur aut qui deleniti similique natus et quibusdam incidunt dolores et aspernatur impedit magni voluptatibus unde omnis rerum voluptas ipsum quis facere perspiciatis vitae sunt quaerat voluptatem ullam a est ducimus nulla soluta et non nihil provident labore culpa velit sint nostrum distinctio dolorem fuga molestiae quisquam aut voluptatem ut sed magnam dolorem ab voluptatem ut dignissimos doloremque consequatur modi dolorum ut aut blanditiis quas qui necessitatibus ex atque qui deserunt qui ipsam voluptas rerum accusamus molestiae nobis nisi veritatis officia excepturi suscipit saepe molestias maiores aliquid exercitationem reprehenderit veniam et laboriosam omnis omnis iusto quis eligendi sequi laudantium perferendis corporis quo in quae laborum eum at sit quia libero fugiat iste beatae nesciunt et quod earum vel eum asperiores est fugit non quia illum quos eos esse id nihil repellendus cum consequatur ratione quidem qui animi voluptates porro et placeat odio ut et cumque ea aperiam neque consequatur dolor eaque ea voluptas quia expedita numquam quo dolores eius aut eos tenetur totam sit ad hic vero sint ut architecto accusantium doloribus illo iure rerum dicta pariatur nam enim dolore et quia minima delectus quasi harum dolor.
                       </div>
                   </div>
                </div>
            </div>
            <div class="boxes row">
                <div class="center-box padding  col-md-5 col-sm-5 col-xs-5">
                    <div class="title">
                        <div class="subtitle"><i class="icon-book"></i>With icon & padding</div>
                        <div class="icon">
                            <span class="glyphicon glyphicon-remove padding-wrong"></span>
                            <span class="glyphicon glyphicon-chevron-up padding-right"></span>
                        </div>
                    </div>
                    <div class="center-content  padding-content">
                        Dicta ea nihil voluptas ab repellat debitis et aperiam ut explicabo qui alias velit accusantium omnis tempora maiores ratione unde accusamus.
                    </div>
                </div>
                <div class="center-box transparent  col-md-3 col-sm-3 col-xs-3">
                    <div class="title transparent-title">
                        <div class="subtitle">Transparent</div>
                        <div class="icon">
                            <span class="glyphicon glyphicon-remove transparent-wrong"></span>
                            <span class="glyphicon glyphicon-chevron-up transparent-right"></span>
                        </div>
                    </div>
                    <div class="center-content  transparent-content">
                        Dicta ea nihil voluptas ab repellat debitis et aperiam ut explicabo qui alias velit accusantium omnis tempora maiores ratione unde accusamus.
                    </div>
                </div>
                <div class="center-box double  col-md-4 col-sm-4 col-xs-4">
                   <div class="case">
                       <div class="title double-title">
                           <div class="subtitle">Double padding</div>
                           <div class="icon">
                               <span class="glyphicon glyphicon-remove double-wrong"></span>
                               <span class="glyphicon glyphicon-chevron-up double-right"></span>
                           </div>
                       </div>
                       <div class="center-content  double-content">
                           Dicta ea nihil voluptas ab repellat debitis et aperiam ut explicabo qui alias velit accusantium omnis tempora maiores ratione unde accusamus.
                       </div>
                   </div>
                </div>
            </div>
            <div class="boxes row">
                <div class="center-box small  col-md-4 col-sm-4 col-xs-4">
                    <div class="case">
                        <div class="title small-title">
                            <div class="subtitle"><i class="icon-resize-vertical"></i>Small box</div>
                            <div class="icon">
                                <span class="glyphicon glyphicon-remove small-wrong"></span>
                                <span class="glyphicon glyphicon-chevron-up small-right"></span>
                            </div>
                        </div>
                        <div class="center-content  small-content">
                            Dicta ea nihil voluptas ab repellat debitis et aperiam ut explicabo qui alias velit accusantium omnis tempora maiores ratione unde accusamus.
                        </div>
                    </div>
                </div>
                <div class="center-box small-bordered  col-md-4 col-sm-4 col-xs-4">
                   <div class="case">
                       <div class="title small-bordered-title">
                           <div class="subtitle">Small $ Bordered</div>
                           <div class="icon">
                               <span class="glyphicon glyphicon-remove small-bordered-wrong"></span>
                               <span class="glyphicon glyphicon-chevron-up small-bordered-right"></span>
                           </div>
                       </div>
                       <div class="center-content  small-bordered-content">
                           Dicta ea nihil voluptas ab repellat debitis et aperiam ut explicabo qui alias velit accusantium omnis tempora maiores ratione unde accusamus.
                       </div>
                   </div>
                </div>
                <div class="center-box small-scrollable  col-md-4 col-sm-4 col-xs-4">
                    <div class="case">
                        <div class="title small-scrollable-title">
                            <div class="subtitle">Small & Scrollable</div>
                            <div class="icon">
                                <span class="glyphicon glyphicon-remove small-scrollable-wrong"></span>
                                <span class="glyphicon glyphicon-chevron-up small-scrollable-right"></span>
                            </div>
                        </div>
                        <div class="center-content  small-scrollable-content">
                            Rerum voluptas omnis dolores qui sapiente molestiae quod natus eveniet dolorem maxime dolorem et et illum quia reprehenderit et quibusdam ut numquam voluptas dolores accusamus assumenda ea soluta sequi velit architecto commodi veniam qui tempore consequatur voluptatem maiores et ut minima sint est est est aut nobis et quia praesentium qui et quos saepe pariatur sint in quas eum sit aut sed eius consequatur perspiciatis voluptatem nihil nihil iste necessitatibus mollitia ut vel vel consequuntur aut repudiandae est ratione ipsa autem aliquid molestiae magnam nemo nam earum tenetur voluptatum recusandae nisi officia repellat officiis hic at ipsum enim non inventore iure iusto et repellendus fugit quasi dolor rerum ab nesciunt totam similique exercitationem omnis qui quisquam delectus optio placeat eum sed asperiores est esse laborum quia id adipisci omnis molestias facilis suscipit vitae doloribus quo culpa non harum a eos quae dolorum incidunt atque aut magni illo enim deserunt vero distinctio aut autem quo et eligendi consectetur animi porro sit aperiam nostrum quidem id corrupti nulla perferendis reiciendis sit quia debitis quam occaecati voluptas dolore consequatur provident labore neque laboriosam tempora voluptatibus eos fuga voluptatem ipsam non voluptate excepturi voluptatem error quis velit minus dignissimos ea impedit cupiditate odio aspernatur ut deleniti corporis facere possimus laudantium sunt ad ut quaerat expedita rem aliquam beatae dicta dolor doloremque amet ex cumque qui veritatis rerum quis odit eaque unde qui cum et sed libero ut voluptates sunt explicabo modi et itaque temporibus aut et accusantium blanditiis fugiat in ducimus ullam alias.
                        </div>
                    </div>
                </div>
            </div>
            <div class="boxes row">
                <div class="center-box with-toolbox  col-md-4 col-sm-4 col-xs-4">
                    <div class="case">
                        <div class="title with-toolbox-title">
                            <div class="subtitle"><i class="icon-resize-vertical"></i>With toolbox</div>
                            <div class="icon">
                                <span class="glyphicon glyphicon-remove with-toolbox-wrong"></span>
                                <span class="glyphicon glyphicon-chevron-up with-toolbox-right"></span>
                            </div>
                        </div>
                        <div class="center-content  with-toolbox-content">
                            <div class="but">
                                <div class="pull-left">
                                    <a class="btn btn-white">
                                        <i class="icon-bold"></i>
                                    </a>
                                    <a class="btn btn-white">
                                        <i class="icon-italic"></i>
                                    </a>
                                </div>
                                <div class="pull-right">
                                    <a class="btn btn-white">
                                        <i class="icon-eye-open"></i>
                                    </a>
                                </div>
                            </div>
                            <p>Dicta ea nihil voluptas ab repellat debitis et aperiam ut explicabo qui alias velit accusantium omnis tempora maiores ratione unde accusamus.</p>
                        </div>
                    </div>
                </div>
                <div class="center-box button-toolbox  col-md-4 col-sm-4 col-xs-4">
                    <div class="case">
                        <div class="title button-toolbox-title">
                            <div class="subtitle">Button toolbox</div>
                            <div class="icon">
                                <span class="glyphicon glyphicon-remove button-toolbox-wrong"></span>
                                <span class="glyphicon glyphicon-chevron-up button-toolbox-right"></span>
                            </div>
                        </div>
                        <div class="center-content  button-toolbox-content">
                            <p>Dicta ea nihil voluptas ab repellat debitis et aperiam ut explicabo qui alias velit accusantium omnis tempora maiores ratione unde accusamus.</p>
                            <div class="but">
                                <div class="pull-left">
                                    <a class="btn btn-white">
                                        <i class="icon-bold"></i>
                                    </a>
                                    <a class="btn btn-white">
                                        <i class="icon-italic"></i>
                                    </a>
                                </div>
                                <div class="pull-right">
                                    <a class="btn btn-white">
                                        <i class="icon-eye-open"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="center-box top-button-toolbox  col-md-4 col-sm-4 col-xs-4">
                    <div class="case">
                        <div class="title top-button-toolbox-title">
                            <div class="subtitle">Top & Button toolbox</div>
                            <div class="icon">
                                <span class="glyphicon glyphicon-remove top-button-toolbox-wrong"></span>
                                <span class="glyphicon glyphicon-chevron-up top-button-toolbox-right"></span>
                            </div>
                        </div>
                        <div class="center-content  top-button-toolbox-content">
                            <div class="but">
                                <div class="pull-left">
                                    <a class="btn btn-white">
                                        <i class="icon-bold"></i>
                                    </a>
                                    <a class="btn btn-white">
                                        <i class="icon-italic"></i>
                                    </a>
                                </div>
                                <div class="pull-right">
                                    <a class="btn btn-white">
                                        <i class="icon-eye-open"></i>
                                    </a>
                                </div>
                            </div>
                            <p>Dicta ea nihil voluptas ab repellat debitis et aperiam ut explicabo qui alias velit accusantium omnis tempora maiores ratione unde accusamus.</p>
                            <div class="but butt">
                                <div class="pull-left">
                                    <a class="btn btn-white">
                                        <i class="icon-bold"></i>
                                    </a>
                                    <a class="btn btn-white">
                                        <i class="icon-italic"></i>
                                    </a>
                                </div>
                                <div class="pull-right">
                                    <a class="btn btn-white">
                                        <i class="icon-eye-open"></i>
                                    </a>
                                </div>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
</body>
</html>